<template>
  <el-dialog
    v-model="centerDialogVisible"
    :title="t('rbac.resource.authInfo')"
    align-center
    width="850px"
    :close-on-click-modal="false"
  >
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane :label="t('rbac.resource.authOrg')" name="org">
        <WsmTable
          ref="orgTable"
          load-url="/rbac-server/rbac/resource/resourceOrgPage"
          v-model="orgQueryFormType"
          :change-load="true"
          :is-layout="false"
          table-height="300px"
        >
          <template #title>{{ t('rbac.resource.authOrg') }}</template>
          <template #button="{ row }">
            <el-button
              v-hasPermi="'removeOrg'"
              v-if="row"
              @click="removeOrg(row.id)"
              type="danger"
              >{{ t('common.delete') }}</el-button
            >
          </template>
          <template #column>
            <el-table-column prop="resState" :label="t('rbac.resource.resState')" width="70">
              <template #default="scope">
                <template v-if="scope.row.resState">
                  <el-tag effect="dark" type="success">{{ t('rbac.resource.enable') }}</el-tag>
                </template>
                <template v-else>
                  <el-tag effect="dark" type="danger">{{ t('rbac.resource.disable') }}</el-tag>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              prop="defaultResource"
              :label="t('rbac.resource.defaultResource')"
              width="90"
            >
              <template #default="scope">
                <template v-if="scope.row.defaultResource">
                  <el-tag effect="light" type="primary">{{ t('rbac.resource.public') }}</el-tag>
                </template>
                <template v-else>
                  <el-tag effect="light" type="danger">{{
                    t('rbac.resource.authorization')
                  }}</el-tag>
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="resName" :label="t('rbac.resource.resName')" width="180" />
            <el-table-column prop="orgName" :label="t('rbac.resource.orgName')" />
          </template>
        </WsmTable>
      </el-tab-pane>
      <el-tab-pane :label="t('rbac.resource.authUser')" name="user">
        <WsmTable
          ref="userTable"
          load-url="/rbac-server/rbac/resource/resourceUserPage"
          v-model="userQueryFormType"
          :change-load="true"
          :is-layout="false"
          table-height="300px"
        >
          <template #title>{{ t('rbac.resource.authUser') }}</template>
          <template #button="{ row }">
            <el-button
              v-hasPermi="'removeUser'"
              v-if="row"
              @click="removeUser(row.id)"
              type="danger"
              >{{ t('common.delete') }}</el-button
            >
          </template>
          <template #column>
            <el-table-column prop="resState" :label="t('rbac.resource.resState')" width="70">
              <template #default="scope">
                <template v-if="scope.row.resState">
                  <el-tag effect="dark" type="success">{{ t('rbac.resource.enable') }}</el-tag>
                </template>
                <template v-else>
                  <el-tag effect="dark" type="danger">{{ t('rbac.resource.disable') }}</el-tag>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              prop="defaultResource"
              :label="t('rbac.resource.defaultResource')"
              width="90"
            >
              <template #default="scope">
                <template v-if="scope.row.defaultResource">
                  <el-tag effect="light" type="primary">{{ t('rbac.resource.public') }}</el-tag>
                </template>
                <template v-else>
                  <el-tag effect="light" type="danger">{{
                    t('rbac.resource.authorization')
                  }}</el-tag>
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="resName" :label="t('rbac.resource.resName')" width="180" />
            <el-table-column prop="userName" :label="t('rbac.resource.userName')" />
          </template>
        </WsmTable>
      </el-tab-pane>
      <el-tab-pane :label="t('rbac.resource.authOrgType')" name="orgType">
        <WsmTable
          ref="orgTypeTable"
          load-url="/rbac-server/rbac/resource/resourceOrgTypePage"
          v-model="orgTypeQueryFormType"
          :change-load="true"
          :is-layout="false"
          table-height="300px"
        >
          <template #title>{{ t('rbac.resource.authOrgType') }}</template>
          <template #button="{ row }">
            <el-button
              v-hasPermi="'removeOrgType'"
              v-if="row"
              @click="removeOrgType(row.id)"
              type="danger"
              >{{ t('common.delete') }}</el-button
            >
          </template>
          <template #column
            ><el-table-column prop="resState" :label="t('rbac.resource.resState')" width="70">
              <template #default="scope">
                <template v-if="scope.row.resState">
                  <el-tag effect="dark" type="success">{{ t('rbac.resource.enable') }}</el-tag>
                </template>
                <template v-else>
                  <el-tag effect="dark" type="danger">{{ t('rbac.resource.disable') }}</el-tag>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              prop="defaultResource"
              :label="t('rbac.resource.defaultResource')"
              width="90"
            >
              <template #default="scope">
                <template v-if="scope.row.defaultResource">
                  <el-tag effect="light" type="primary">{{ t('rbac.resource.public') }}</el-tag>
                </template>
                <template v-else>
                  <el-tag effect="light" type="danger">{{
                    t('rbac.resource.authorization')
                  }}</el-tag>
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="resName" :label="t('rbac.resource.resName')" width="180" />
            <el-table-column prop="typeName" :label="t('rbac.resource.orgTypeName')" />
          </template>
        </WsmTable>
      </el-tab-pane>
      <el-tab-pane :label="t('rbac.resource.authUserType')" name="userType">
        <WsmTable
          ref="userTypeTable"
          load-url="/rbac-server/rbac/resource/resourceUserTypePage"
          v-model="userTypeQueryFormType"
          :change-load="true"
          :is-layout="false"
          table-height="300px"
        >
          <template #title>{{ t('rbac.resource.authUserType') }}</template>
          <template #button="{ row }">
            <el-button
              v-hasPermi="'removeUserType'"
              v-if="row"
              @click="removeUserType(row.id)"
              type="danger"
              >{{ t('common.delete') }}</el-button
            >
          </template>
          <template #column
            ><el-table-column prop="resState" :label="t('rbac.resource.resState')" width="70">
              <template #default="scope">
                <template v-if="scope.row.resState">
                  <el-tag effect="dark" type="success">{{ t('rbac.resource.enable') }}</el-tag>
                </template>
                <template v-else>
                  <el-tag effect="dark" type="danger">{{ t('rbac.resource.disable') }}</el-tag>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              prop="defaultResource"
              :label="t('rbac.resource.defaultResource')"
              width="90"
            >
              <template #default="scope">
                <template v-if="scope.row.defaultResource">
                  <el-tag effect="light" type="primary">{{ t('rbac.resource.public') }}</el-tag>
                </template>
                <template v-else>
                  <el-tag effect="light" type="danger">{{
                    t('rbac.resource.authorization')
                  }}</el-tag>
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="resName" :label="t('rbac.resource.resName')" width="180" />
            <el-table-column prop="typeName" :label="t('rbac.resource.userTypeName')" />
          </template>
        </WsmTable>
      </el-tab-pane>
      <el-tab-pane :label="t('rbac.resource.authRoleType')" name="roleType">
        <WsmTable
          ref="roleTypeTable"
          load-url="/rbac-server/rbac/resource/resourceRoleTypePage"
          v-model="roleTypeQueryFormType"
          :change-load="true"
          :is-layout="false"
          table-height="300px"
        >
          <template #title>{{ t('rbac.resource.authRoleType') }}</template>
          <template #button="{ row }">
            <el-button
              v-hasPermi="'removeRoleType'"
              v-if="row"
              @click="removeRoleType(row.id)"
              type="danger"
              >{{ t('common.delete') }}</el-button
            >
          </template>
          <template #column
            ><el-table-column prop="resState" :label="t('rbac.resource.resState')" width="70">
              <template #default="scope">
                <template v-if="scope.row.resState">
                  <el-tag effect="dark" type="success">{{ t('rbac.resource.enable') }}</el-tag>
                </template>
                <template v-else>
                  <el-tag effect="dark" type="danger">{{ t('rbac.resource.disable') }}</el-tag>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              prop="defaultResource"
              :label="t('rbac.resource.defaultResource')"
              width="90"
            >
              <template #default="scope">
                <template v-if="scope.row.defaultResource">
                  <el-tag effect="light" type="primary">{{ t('rbac.resource.public') }}</el-tag>
                </template>
                <template v-else>
                  <el-tag effect="light" type="danger">{{
                    t('rbac.resource.authorization')
                  }}</el-tag>
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="resName" :label="t('rbac.resource.resName')" width="180" />
            <el-table-column prop="typeName" :label="t('rbac.resource.roleTypeName')" />
          </template>
        </WsmTable>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>
<script setup lang="ts">
import { WsmTable } from '@/components/WsmTable'
import { useI18n } from '@/hooks/web/useI18n'
import {
  removeOrgApi,
  removeUserApi,
  removeOrgTypeApi,
  removeUserTypeApi,
  removeRoleTypeApi
} from '@/api/rbac/resource'
import { reactive, ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { QueryFormType } from '@/components/WsmTable/src/types'

const centerDialogVisible = ref<boolean>(false)

const activeName = ref('org')

const { t } = useI18n()

//表格对象
const orgTable = ref()
const userTable = ref()
const orgTypeTable = ref()
const userTypeTable = ref()
const roleTypeTable = ref()

const orgQueryFormType: QueryFormType = reactive({
  resId: {
    value: '',
    clear: false
  }
})

const userQueryFormType: QueryFormType = reactive({
  resId: {
    value: '',
    clear: false
  }
})

const orgTypeQueryFormType: QueryFormType = reactive({
  resId: {
    value: '',
    clear: false
  }
})

const userTypeQueryFormType: QueryFormType = reactive({
  resId: {
    value: '',
    clear: false
  }
})

const roleTypeQueryFormType: QueryFormType = reactive({
  resId: {
    value: '',
    clear: false
  }
})

const show = async (id: string) => {
  orgQueryFormType.resId.value = id
  userQueryFormType.resId.value = id
  orgTypeQueryFormType.resId.value = id
  userTypeQueryFormType.resId.value = id
  roleTypeQueryFormType.resId.value = id
  centerDialogVisible.value = true
}

//关闭表单
const hide = () => {
  centerDialogVisible.value = false
}

const removeOrg = async (id: string) => {
  ElMessageBox.confirm(t('common.removeMessage'), t('common.delWarning'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(async () => {
    const rs = await removeOrgApi({ id })
    if (rs.success) {
      orgTable.value.load(1)
    }
  })
}

const removeUser = async (id: string) => {
  ElMessageBox.confirm(t('common.removeMessage'), t('common.delWarning'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(async () => {
    const rs = await removeUserApi({ id })
    if (rs.success) {
      userTable.value.load(1)
    }
  })
}

const removeUserType = async (id: string) => {
  ElMessageBox.confirm(t('common.removeMessage'), t('common.delWarning'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(async () => {
    const rs = await removeUserTypeApi({ id })
    if (rs.success) {
      userTypeTable.value.load(1)
    }
  })
}

const removeOrgType = async (id: string) => {
  ElMessageBox.confirm(t('common.removeMessage'), t('common.delWarning'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(async () => {
    const rs = await removeOrgTypeApi({ id })
    if (rs.success) {
      orgTypeTable.value.load(1)
    }
  })
}

const removeRoleType = async (id: string) => {
  ElMessageBox.confirm(t('common.removeMessage'), t('common.delWarning'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(async () => {
    const rs = await removeRoleTypeApi({ id })
    if (rs.success) {
      roleTypeTable.value.load(1)
    }
  })
}
//暴露方法
defineExpose({ show, hide })
</script>
<style scoped></style>
